<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
import moment from 'moment'

const props = defineProps<{ keywords: keywordsOf<Profile>, data: Profile[] }>()
let _keywords = { ...props.keywords }

const TODAY = moment()
const diplomas = ref(["大专", "大本"])
const tags = ref([
    { name: "H5", checked: false },
    { name: "Vue.js", checked: false },
    { name: "TypeScript", checked: false },
    { name: "Angular.js", checked: false },
    { name: "React.js", checked: false },
    { name: "Cola.js", checked: false },
    { name: "Dorado", checked: false },
    { name: "Es6", checked: false },
    { name: "移动开发", checked: false },
    { name: "小程序", checked: false }])

const availability = reactive({
    type: moment().isSame(_keywords.availability?.availableDate, 'day') ? 'TODAY' : 'APPOINTMENT',
});

const emit = defineEmits(['filterChange'])

const onAvailablityTypeChange = (): void => {
    if (availability.type == 'APPOINTMENT') {
        (_keywords.availability as Availability).availableDate = moment().add(1, 'month').format('YYYY-MM-DD');
    } else {
        (_keywords.availability as Availability).availableDate = TODAY.format('YYYY-MM-DD');
    }
}

const disabledDate = (day: string): boolean => {
    return moment(day).isBefore(TODAY, 'day');
}

const title = computed(() => {
    return `${moment(props.keywords.availability?.availableDate).format('YYYY年MM月DD日')}前可入场人员(${props.data.length}人)`
})

const filterDrawerVisible = ref(false as boolean)

const openFilter = () => {
    _keywords = { ...props.keywords }
    filterDrawerVisible.value = true
}

const update = () => {
    filterDrawerVisible.value = false
    emit('filterChange', _keywords)
}

const colors: { [key: string]: string } = {
    'H5': 'orange',
    'VUE': 'green',
    "TYPESCRIPT": 'blue',
    "ANGULAR": 'red',
    "REACT": 'purple',
    "COLA": 'pink',
    "移动开发": 'teal',
    "DORADO": 'turquoise',
    "ES6": 'olive',
    "小程序": 'green'
}

const color = (tag: string): string => {
    const target: string | undefined = Object.keys(colors).find(_tag => {
        return (tag.toUpperCase()).indexOf(_tag) >= 0
    })
    return target ? colors[target] : 'gray' + 'tag'
}

const check = (index: number): void => {
    if (tags.value[index].checked == true) {
        tags.value[index].checked = false;
    }
    else {
        tags.value[index].checked = true;
    }
}
</script>
<template>
    <el-affix :offset="0">
        <div class="top-header">
            {{ title }}
            <div class="right" @click="openFilter">
                <el-icon class="el-icon-s-operation"></el-icon>
            </div>
        </div>
    </el-affix>

   
</template>

<style scoped>
.top-header {
    height: 80px;
    color: #3030b1;
    background-color: #bde0ff;
    border-bottom: solid 1px #5ea2f5;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 40px;
}

.top-header .right {
    color: #0c3898;
}

.el-icon-s-operation {
    font-size: 30px;
}

.hero {
    padding: 60px;
    text-align: center;
}

:deep(.filter-drawer__footer) {
    text-align: right;
    padding: 10px 40px;
}

:deep(.el-input) {
    width: 100%;
}

:deep(.el-checkbox) {
    width: 120px;
    margin-left: 0;
    color: black;
}

:deep(.el-checkbox.is-bordered + .el-checkbox.is-bordered) {
    margin-left: 0px;
}

:deep(.el-checkbox.is-bordered) {
    padding: 0 20px 0 20px;
}

:deep(.el-form-item) {
    border-top: solid 1px lightgray;
    padding: 10px 20px;
    display: block;
}

/* el-drawer加滚动条 */
.overflowAuto {
    overflow-y: auto;
    position: absolute;
    width: 100%;
    height: 100%;
}

.overflowAuto::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.overflowAuto::-webkit-scrollbar-thumb {
    background-color: rgb(211, 202, 202);
}
.tag {
    color: white;
    background-color: gray;
    display: inline-block;
    border-radius: 5px;
    padding: 2px 8px;
    margin: 4px;
}
.green {
    background-color: #12ac71;
}

.blue {
    background-color: #3d3db6;
}

.orange {
    color: white;
    background-color: orange;
}

.red {
    background-color: brown;
}

.purple {
    background-color: purple;
}

.pink {
    background-color: palevioletred;
}

.olive {
    background-color: olivedrab;
}

.turquoise {
    background-color: turquoise;
}

.teal {
    background-color: teal;
}

.tag {
    color: white;
}
</style>